<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Socket.io Express Example</title>
  </head>
  <body>
    <h1>Socket.io Express Example</h1>
    <form id="set-nickname">
      <label for="nickname">Nickname:</label>
      <input type="text" id="nickname" />
      <input type="submit" />
    </form>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io.connect();
      jQuery(function ($) { 
        var nickName = $('#nickname');
        var setNicknameForm = $('#set-nickname');
        setNicknameForm.submit(function(event) {
          event.preventDefault(); 
          socket.emit('nickname', nickName.val(), function (data) {
            if (data) {
              console.log('Nickname set successfully');
              setNicknameForm.hide();
            } else {
              setNicknameForm.prepend('<p>Sorry - that nickname is already taken.');
            }
          });
        });
      });
    </script>
  </body>
</html>
